<template>
  <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="line-canvas" />
</template>

<script>
import echarts from "echarts";
import mpvueEcharts from "mpvue-echarts";
let chart;
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  const option = {};
  canvas.setChart(chart);
  chart.setOption(option);
  return chart; // 返回 chart 后可以自动绑定触摸操作
}
export default {
  props: {
    type: {
      type: String
    },
    data: {
      type: Object,
      default: () => {
        return {
          data: [],
          date: []
        }
      }
    },
    update: {
      type: Boolean
    }
  },
  components: {
    mpvueEcharts
  },
  data() {
    return {
      echarts,
      onInit: initChart
    };
  },
  computed: {
    barColor() {
      const colorMap = {
        all: "#FFABBC",
        listening: "#FFD733",
        speaking: "#50E3C2",
        reading: "#BC88F7",
        writing: "#678AFF"
      };
      return colorMap[this.type] || "#eeeeee";
    },
    calcOpt() {
      return {
        backgroundColor: "#FFF",
        // title: {
        //   text: '堆叠区域图',
        //   textStyle: {
        //     align: 'center',
        //     color: '#fff',
        //     fontSize: 20,
        //   },
        //   top: '5%',
        //   left: 'center',
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "transparent"
            },
            crossStyle:{
                color: 'transparent',

            },
            type: "cross",
            label: {
              show: false
            }
          },
          formatter(params) {
            let dateString = params[0].axisValue;
            const currentYear = new Date().getFullYear() + '';
            const arrayData = dateString.split('/');
            const dateYear = arrayData[0];
            dateString = (currentYear === dateYear) ? `${arrayData[1]}/${arrayData[2]}` : dateString
            return `${dateString} ${params[0].data}次`;
          },
          backgroundColor: "#DDF5F3",
          padding: [3, 10, 0, 10],
          textStyle: {
            color: "#3D475C",
            fontSize: "16px",
            extraCssText: "box-shadow:0px 4px 8px 0px rgba(166,191,189,1);"
          }
        },
        // legend: {
        //   x: '4%',
        //   top: '1%',
        //   textStyle: {
        //     color: '#8C8C8C',
        //   },
        //   data: ['商品', '会员']
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: 30,
          top: 20,
          right: 10,
          bottom: 10
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
              lineStyle: {
                color: "transparent"
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#8c8c8c"
              }
            },
            // boundaryGap: false,
            data: this.data.date
          }
        ],
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          nameGap: 4,
          splitNumber: 1,
          axisLabel: {
            textStyle: {
              color: "#9DA3AC",
              fontSize: 9
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#eeeeee",
              width: 1
            }
          }
        },
        series: [
          {
            name: "会员",
            type: "line",
            smooth: true,
            //  showAllSymbol: false,
            showSymbol: false, // 鼠标移入才显示圆点
            symbolSize: 8,
            symbol: 'path://M512.3 512.2m-414.3 0a414.3 414.3 0 1 0 828.6 0 414.3 414.3 0 1 0-828.6 0Z',
            itemStyle: {
                normal: {
                    color: '#abe6e1'
                }
            },
            areaStyle: {
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#DDF5F3"
                    },
                    {
                      offset: 1,
                      color: "#fff"
                    }
                  ],
                  false
                )
              }
            },
            data: this.data.data
          }
        ]
      };
    }
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler() {
        let timer;
        const updateChart = () => {
          if (chart && this.data.data) {
            chart.setOption(this.calcOpt);
            clearTimeout(timer);
          } else {
            timer = setTimeout(updateChart, 300);
          }
        };
      updateChart();
      }
    },
    update() {
      if (this.update) {
        setTimeout(() => {
        chart.setOption(this.calcOpt);
        }, 300);
        this.$emit('endUpdate');
      }
    }
  },
  methods: {
    initEvent() {
      // 有问题 todo
      // Enable data zoom when user click bar.
      const zoomSize = 6;
      chart.on("click", params => {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        chart.dispatchAction({
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, this.data.length - 1)
            ]
        });
      });
    }
  },
  mounted() {
    // 创建事件
    //   setTimeout(this.initEvent, 500);
  }
};
</script>

<style lang="less" scoped>
</style>